import cn from 'classnames';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import Loading from '@kuiper-components/loading';
import { Link } from 'react-router-dom';
import fetchFer from 'API/fetch';
import MessageNav from '../../MessageNav';
import { datetime as timeFormatter } from '../../../../../common/formatter';
import Breadcrumb, { Item } from '../../../../components/Breadcrumb';
import s from './Detail.module.css';
import { turnToUrlparam } from '../../../../helpers/getUrlParams';

const QUERY_GQL = gql`
	query($id: MongoID) {
		NotificationOne(filter: { _id: $id }) {
			title
			message
			datetime
			data
			action
			currentUserChoosedAction
			_id
		}
	}
`;

const REPLY_NOTIFICATION = gql`
	mutation($id: MongoID!, $action: String!) {
		replyNotification(id: $id, action: $action) {
			_id
			currentUserMarked
			currentUserChoosedAction
		}
	}
`;

function Detail({
	className,
	match: {
		params: { id },
	},
}) {
	const { data, loading } = useQuery(QUERY_GQL, {
		variables: { id },
	});
	const [reply] = useMutation(REPLY_NOTIFICATION);
	const handleReply = ({ id, action }) => {
		reply({
			variables: {
				id,
				action,
			},
		});
	};
	const see = detail => {
		console.log('[ detail ]-82', detail)
		if (detail?.taskId) {
			if (detail?.taskCategory === 'hostVul') {
				return `/job-manage/host-task?tid=${detail?.taskId}`;
			} else if (detail?.taskCategory === 'aviliable') {
				if (detail?.triggerType) {
					return `/job-manage/aviliable-task/detail?id=${detail?.asset_task_id}&type=${detail?.triggerType}&jid=${detail?.jobId}`;
				} else {
					return `/job-manage/aviliable-task?filter=${encodeURI(
						JSON.stringify({
							target: detail?.target,
							task_group_type: detail?.taskType,
						})
					)}`;
				}
			} else if (
				['content', 'vul', 'ssl', 'securityEvent', 'changeCheck'].includes(detail?.taskType)
			) {
				if (detail?.triggerType) {
					let taskType = detail?.taskType
					if (detail?.taskType === "securityEvent") {
						taskType = "security_event";
					} else if (detail?.taskType === "changeCheck") {
						taskType = "change_check";
					}
					if (
						detail?.triggerType === 'schedule' ||
						detail?.triggerType === 'scheduleIncrement'
					) {
						return `/job-manage/web-task/history?asset_task_id=${detail?.asset_task_id}&task_id=${detail?.taskId}&task_types=${taskType}&last=true`;
					} else {
						return `/job-manage/web-task/detail?id=${detail?.asset_task_id}&type=${detail?.triggerType}&jid=${detail?.jobId}&tag=${taskType}`;
					}
				} else {
					return `/job-manage/web-task?filter=${encodeURI(
						JSON.stringify({ target_url: detail?.target })
					)}`;
				}
			} else {
				if (detail?.triggerType) {
					return {
						pathname: `/asset-manage/manage/web/Detail`,
						search: `jid=${detail.jobId}&url=${detail.target}&task_id=${detail.taskId}&TabsKey=asset`,
					};
				} else {
					return `/asset-manage/manage/web?filter=${encodeURI(
						JSON.stringify({ target_url: detail?.target, asset_type: 'web' })
					)}`;
				}
			}
		}
	};
	React.useEffect(() => {
		handleReply({
			id,
			action: 'mark',
		});
	}, [data]);
	if (loading) {
		return <Loading />;
	}
	const { title, message, datetime, data: detail } =
		data?.NotificationOne || {};

	return (
		<div className={cn(className, s.detailContainer)}>
			<MessageNav />
			<div className={s.detail}>
				<Breadcrumb className={s.breadcrumb}>
					<Item key="message" disabled>
						消息中心
					</Item>
					<Item key="notification-centre">告警通知</Item>
					<Item key="detail">消息详情</Item>
				</Breadcrumb>
				<div className={s.content}>
					<div className={s.titleContainer}>
						<h1 className={s.title}>{title}</h1>
						<div className={s.datetime}>{timeFormatter(datetime)}</div>
					</div>
					<hr className={s.cutLine} />
					<p className={s.message}>
						{message}
						{detail && (
							<>
								请点击
								<Link to={see(detail)}> 查看详情</Link>。
							</>
						)}
					</p>
				</div>
			</div>
		</div>
	);
}

Detail.propTypes = {
	className: PropTypes.string,
	match: PropTypes.shape({
		params: PropTypes.shape({
			id: PropTypes.string,
		}),
	}),
};
Detail.defaultProps = {
	className: '',
};

export default Detail;
